<template>

  <div class="brief" :style="{ 'background-color': props.backgroundColor }">

    <van-collapse class="collapse" v-model="activeNames" @change="handleCollapseChange" :border="false"
      :style="{ 'background-color': props.backgroundColor }">

      <van-collapse-item ref="collapseRef" title="简介" name="1" :style="{ 'background-color': props.backgroundColor }">

        <template #label>
          <div :style="{ 'background-color': props.backgroundColor, 'color': '#fff', 'font-size': '15px' }"
            class="three-lines" v-show="activeNames[0] === undefined">
            {{ props.movieBrief }}
          </div>

        </template>
        <!-- <template #value>{{ collapseMenuValue }}</template> -->

        <template #default>
          <div :style="{ 'background-color': props.backgroundColor }">
            {{ props.movieBrief }}
          </div>

        </template>
      </van-collapse-item>

    </van-collapse>


  </div>


</template>


<script setup>
import { ref, useTemplateRef, onMounted } from 'vue'
const collapseRef = useTemplateRef('collapseRef');

const activeNames = ref(['1']);

const collapseMenuValue = ref('展开')


const props = defineProps({
  backgroundColor: {
    type: String,
  },
  movieBrief: {
    type: String,
  }
});


onMounted(() => {
  //初始化关闭折叠
  collapseRef.value.toggle(false)



})



const handleCollapseChange = (activeNames) => {
  console.log("activeNames:", activeNames[0]);
  if (activeNames[0] === undefined) {
    //收起状态
    collapseMenuValue.value = '展开'

  } else if (activeNames[0] === '1') {

    collapseMenuValue.value = '收起'

  }
};

</script>




<style scoped>
.three-lines {
  display: -webkit-box;
  /* 必须结合其他属性一起使用 */
  -webkit-box-orient: vertical;
  /* 设置子元素的垂直排列方式 */
  line-clamp: 3;
  -webkit-line-clamp: 3;
  /* 设置最大行数为3 */
  overflow: hidden;
  /* 隐藏溢出的内容 */
  text-overflow: ellipsis;
  width: 100%;
  /* 当文本溢出时显示省略号 */
  line-height: 1.5em;
  /* 根据需要调整行高 */
  max-height: 4.5em;
  /* 行高乘以显示的最大行数，这里是3行 */
}

.brief {
  margin-top: 10px;
  background-color: rgba(255, 255, 255, 0);
}

:deep(.van-collapse.collapse, ) {
  background-color: inherit !important;

}

:deep(.van-collapse-item) {
  background-color: inherit !important;
  padding: 0 !important;
}

:deep(.van-collapse-item__title) {
  background-color: inherit !important;
  padding: 0 !important;
}


:deep(.van-collapse-item__content, ) {
  background-color: inherit !important;
  color: #fff !important;
  font-size: 15px;
  padding: 0 10px;
}

:deep(.van-collapse-item__wrapper) {
  border: 0 !important;
}

:deep(.van-cell__title span) {
  color: #fff !important;
  font-size: 15px;
}

:deep(.van-collapse-item__title:after) {
  border-bottom: none !important;
}
</style>
